<script setup name="SearchCard">
/* 
    v-model:绑定表单对象（该对象会被缓存，重置时会恢复为最初绑定的对象）
    @onSearch=绑定查询事件
*/

import { deepCopy } from '/@/utils';

const props = defineProps(['modelValue']);
let defaultValue = null;
onMounted(() => {
	defaultValue = deepCopy(props.modelValue);
});
const emit = defineEmits(['update:modelValue', 'onSearch']);
const formRef = ref();
function resetForm() {
	ruleForm.value = deepCopy(defaultValue);
	// onSearch();
}
function onSearch() {
	emit('onSearch');
}
const ruleForm = computed({
	get: () => props.modelValue,
	set: (val) => {
		emit('update:modelValue', val);
	},
});
</script>
<template>
	<div class="SearchCard">
		<el-card class="box-card">
			<el-form :model="ruleForm" :inline="true" ref="formRef" label-width="90px" v-on:submit.prevent>
				<slot></slot>
				<div class="btn">
					<el-form-item>
						<el-button @click="resetForm">重置</el-button>
						<el-button type="primary" @click="onSearch">搜索</el-button>
					</el-form-item>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<style lang="scss" scoped>
.SearchCard {
	margin-bottom: 10px;
	:deep(.el-card) {
		.el-card__header {
			padding: 10px 20px;
		}
		.el-card__body {
			padding: 18px 10px 0;
			// .el-form-item {
			//     margin-right: 20px;
			//     margin-bottom: 5px;
			//     .el-input,
			//     .el-date-editor {
			//         width: 220px;
			//     }
			// }
			.btn {
				text-align: center;
				margin-top: 10px;
			}
		}
	}
}
</style>
